<template>
  <div class="quantityData">
    <div class="top-tools">
      <h3>各课程体系活动数量分布</h3>
    </div>
    <div id="quantityData"></div>
  </div>
</template>

<script>
import { DataView } from '@antv/data-set';
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      data: [
        { item: "其他", count: 45},
        { item: "多彩青春计划", count: 53 },
        
        { item: "红色筑梦计划", count: 28},
        { item: "师长领航计划", count: 5},
        { item: "春粟劳育计划", count: 2},
        { item: "全球胜任力计划", count: 2},
        { item: "先锋论坛计划", count: 2},
        { item: "经典悦读计划", count: 1},
        { item: "双创引领计划", count: 1}
        
      ]
    };
  },
  methods: {
    createChart() {
      const chart = new Chart({
        container: "quantityData",
        autoFit: true,
        height: 300
      });
      const dv = new DataView();
      dv.source(this.data).transform({
            type: 'percent',
            field: 'count',
            dimension: 'item',
            as: 'percent',
        });
      chart.data(dv.rows);
      chart.coordinate("theta", {
        radius: 0.8,
        innerRadius: 0.5
      });
      chart.scale("percent", {
        formatter: val => {
          val = val.toFixed(2) * 100 + "%";
          return val;
        }
      });
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
    });
    chart.legend({
            itemName:{
                style:{
                    fill:'#fff',
                    fontSize:16,
                    lineHeight:18
                }
            },
            marker:{
                style:{
                    r:8
                }
            }
        })

      chart
        .interval()
        .position("percent")
        .color("item")
  
        .label('count', {
            offset: -10,
        })
        .adjust("stack");

      chart.interaction("element-active");

      chart.render();
    }
  },
  mounted() {
    this.createChart();
  }
};
</script>

<style lang="scss" scoped>
.quantityData {
  padding: 12px 20px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
      margin-bottom: 20px;
    }
  }
}
</style>